import { Menu } from 'antd';
import { useNavigate, useLocation } from "react-router-dom";
import type { MenuProps } from 'antd';
import { useState } from 'react';
import { PieChartOutlined } from '@ant-design/icons';
type MenuItem = Required<MenuProps>['items'][number];
const items: MenuItem[] = [
    {
        label: '栏目 1',
        key: '/about',
        icon: <PieChartOutlined />
    },
    {
        label: '栏目 2',
        key: '/user',
        icon: <PieChartOutlined />
    },
    {
        label: '测试',
        key: '/test',
        icon: <PieChartOutlined />
    }
];
const Comp: React.FC = () => {
    const navigateTo = useNavigate();
    const currentRoute = useLocation();
    const menuClick = (e: { key: string }) => {
        // 点击跳转到对应的路由   编程式导航跳转， 利用到一个hook
        navigateTo(e.key);
    }
    const firstOpenKey: string = "";
    function findKey(obj: { key: string }) {
        return obj.key === currentRoute.pathname
    }
    // 多对比的是多个children

    // 设置展开项的初始值
    const [openKeys, setOpenKeys] = useState([firstOpenKey]);
    const handleOpenChange = (keys: string[]) => {
        setOpenKeys([keys[keys.length - 1]]);
    }
    return (
        <Menu
            theme="dark"
            // defaultSelectedKeys 表示当前样式所在的选中项的key
            defaultSelectedKeys={[currentRoute.pathname]}
            mode="inline"
            // 菜单项的数据
            items={items}
            onClick={menuClick}
            // 某项菜单展开和回收的事件
            onOpenChange={handleOpenChange}
            // 当前菜单展开项的key数组
            openKeys={openKeys}
        />
    )
}

export default Comp;